.ai { padding: 24px 24px 60px; background: transparent; color: #1d2129; }

.top-card { background:transparent; border:1px solid var(--ant-color-border); border-radius:16px; padding:16px 20px; margin-bottom:16px; box-shadow:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tc-title { font-weight:700; }
.tc-sub { font-size:12px; color:#86909c; }
.tc-actions { display:flex; gap:8px; }
.btn { height:34px; padding:0 14px; border-radius:8px; border:1px solid var(--ant-color-border); background:#fff; color:#1d2129; cursor:pointer; }
.btn.primary { background: var(--ant-color-primary, #2f54eb); color:#fff; border-color: var(--ant-color-primary, #2f54eb); }

.flow { position: relative; background: transparent; border: 1px solid var(--ant-color-border); border-radius: 16px; padding: 24px; box-shadow: none; }
.flow-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.flow-sub { font-size: 12px; color: #86909c; margin-bottom: 18px; }

.flow-grid { display: grid; grid-template-columns: 1.2fr 1.6fr 1.6fr; grid-template-rows: 1fr 1fr; gap: 16px; align-items: center; }

.user { display: flex; align-items: center; justify-content: center; grid-row: 1 / span 2; }
.user .avatar { width: 64px; height: 64px; border-radius: 50%; background: #e5e6eb; position: relative; }
.user .avatar:before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 3px solid #c9cdd4; }

.card { background: transparent; border: 1px solid var(--ant-color-border); border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 12px; }
.card .icon { width: 40px; height: 40px; border-radius: 999px; background: linear-gradient(90deg, var(--ant-color-primary, #2f54eb), #69b1ff); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.card .info { display: grid; gap: 4px; }
.card .title { font-weight: 700; }
.card .desc { font-size: 12px; color: #4e5969; }

.dh { padding: 12px 16px; display: grid; gap: 10px; }
.dh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.thumb { height: 56px; border-radius: 8px; background: transparent; border: 1px solid var(--ant-color-split); display: flex; align-items: center; justify-content: center; color: #4e5969; font-size: 12px; }

.flow-svg { position: absolute; inset: 0; pointer-events: none; }
.label { font-size: 12px; fill: #86909c; }
.arrow { stroke: #69b1ff; stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.arrow-solid { stroke-dasharray: none; }

@media (max-width: 1100px) { .flow-grid { grid-template-columns: .8fr 1fr; grid-template-rows: auto auto auto; } .user { grid-row: 1; grid-column: 1; justify-content: flex-start; } .asr { grid-column: 2; grid-row: 1; } .llm { grid-column: 2; grid-row: 2; } .tts { grid-column: 2; grid-row: 3; } .dh-card { grid-column: 1 / span 2; } }

